<template>
  <div class="shop-home-page">
    <div class="header bg f-c">
      <div class="nav-box f-s">
        <div class="header-content">
          <Navbar />
        </div>
      </div>
      <slot>
        <div class="nav-box2 f-g f-c j-c">
          <div class="f-r j-c a-c">
            <div class="title">大数据商城</div>
            <div class="f-r a-c" style="height: 60px">
              <el-input v-model="searchValue" style="width: 700px">
                <el-button
                  slot="append"
                  style="width: 120px"
                  class="searchbtn"
                  type="primary"
                  @click="handleSearch"
                >搜索</el-button>
              </el-input>
            </div>
          </div>
          <div class="count-box f-r j-a a-c">
            <div v-for="(item,index) in countList" :key="index" class="count-item">
              <div class="count">
                <CountTo
                  :start-val="0"
                  :end-val="item.value"
                  :duration="3000"
                />
              </div>
              <div class="count-name">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </slot>
    </div>
    <div class="body-box bg">
      <div class="body">
        <div class="el-row card_content">
          <el-row>
            <el-col :span="8">
              <div class="block-item hvr-grow" @click="toDetail('1')">
                <div class="item tools">
                  <div class="logo">
                    <img src="@/assets/tools.1664416195928.png" alt="">
                  </div>
                  <div class="detail">
                    <div class="info">
                      <h2>数据工具超市</h2>
                      <div class="text">
                        工具超市主要提供大数据开发套件工具的能力，包括数据汇聚工具、数据治理工具、数据开发工具、数据开放工具、数据分析与可视化工具等。
                      </div>
                      <a>进入 &gt;</a>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="block-item hvr-grow" @click="toDetail('2')">
                <div class="item application">
                  <div class="logo">
                    <img src="@/assets/app.1664416195928.png" alt="">
                  </div>
                  <div class="detail">
                    <div class="position" />
                    <div class="info">
                      <h2>数据应用超市</h2>
                      <div class="text">
                        数据应用超市将用户上传的应用进行分类，这些类别可分为：公共服务，城市治理，产业创新，公共安全等。用户可以按照不同的浏览模式检索并获取数据。
                      </div>
                      <a>进入 &gt;</a>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="block-item hvr-grow" @click="toDetail('3')">
                <div class="item server">
                  <div class="logo">
                    <img src="@/assets/server.1664416195928.png" alt="">
                  </div>
                  <div class="detail">
                    <div class="position" />
                    <div class="info">
                      <h2>数据服务超市</h2>
                      <div class="text">
                        构建大数据业务能力的开放体系的核心是将大数据平台的数据能力以API形式进行统一封装和开放，实现服务标准化，提供数据目录及数据获取服务。
                      </div>
                      <a>进入 &gt;</a>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="db-container">
        <div class="footer-item">
          <div class="footer-text">主办：xxx市政务服务数据管理局</div>
          <div class="footer-text">技术支持单位：xxx市大数据资源管理中心</div>
          <div class="footer-text">运营：xxx市XXXX科技发展集团有限公司</div>
        </div>
        <div class="footer-item" style="justify-content: center">
          <div class="footer-text">粵ICP备10001213213号码-7</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Navbar from '../layout/navbar'
import CountTo from 'vue-count-to'
import { http_shop } from '@/api'

export default {
  name: 'Index',
  components: {
    Navbar,
    CountTo
  },
  data() {
    return {
      recordList: [
        { name: '数据治理' },
        { name: '数据汇聚' },
        { name: '城市治理' },
        { name: '公共服务' }
      ],
      countList: [
        { name: '已发布', value: 0 },
        { name: '近期发布', value: 0 },
        { name: '已订阅', value: 0 }
      ],
      searchValue: '',
      pageConfig: {

      }
    }
  },
  created() {
    http_shop.countTotal({
      businessType: ''
    }).then(res => {
      this.countList[0].value = res.publishCount
      this.countList[1].value = res.recentPublishCount
      this.countList[2].value = res.subCount
    })
  },
  methods: {
    handleSearch() {
      this.$emit('search', this.searchValue)
    },
    toDetail(name) {
      let path = ''
      if (name === '1') {
        path = '/shop-tool'
      } else if (name === '2') {
        path = '/shop-app'
      } else {
        path = '/shop-serve'
      }
      this.$router.push({
        path
      })
    }
  }
}
</script>

<style lang="scss">
.shop-home-page {
  .body-box {
    width: 100%;
    background-image: url("~@/assets/externalurl.1664416195928.png");
  }
  .body {
    width: 1400px;
    margin: 0 auto;
    .block-item {
      margin-top: 100px;
      margin-bottom: 164px;
      overflow: hidden;
      border-radius: 5px;
      height: 520px;
      cursor: pointer;
      .detail {
        position: absolute;
        padding-top: 40px;
        top: 168px;
        width: 350px;
        height: 343px;
        background: linear-gradient(180deg,#f2f5f7,#ffffff);
        border: 3px solid #ffffff;
        box-shadow: 0 5px 15px #a8acc04d;
        border-radius: 5px;
        left: 50%;
        transform: translateX(-50%);
        .info {
          padding-left: 40px;
          padding-right: 54px;
          padding-bottom: 40px;
          color: #4a5870;
          font-size: 16px;
          .h2 {
            width: 100%;
            color: #16181a;
            font-size: 26px;
            margin-bottom: 30px;
            margin-top: 40px;
          }
          .text {
            color: #4a5870;
            font-size: 16px;
            margin-bottom: 70px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 5;
            -webkit-box-orient: vertical;
          }
          a {
            margin-top: 70px;
            color: #3d72ff;
            font-size: 21px;
          }
        }
      }
    }
  }
  .footer {
    width: 100%;
    background: #e6ecf5;
    height: 100px;
    padding: 23px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    .footer-item {
      width: 730px;
      height: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-align: center;
      .footer-text {
        font-size: 12px;
        color: #7a7a7a;
      }
    }
  }
  .header {
    width: 100%;
    background-image: url("~@/assets/shop/head.jpg");
  }
  .nav-box {
    border-bottom: 2px solid rgba(255, 255, 255, 0.4);
  }
  .header-content {
    width: 1400px;
    margin: 0 auto;
    padding: 20px 0;
  }
  .nav-box2 {
    width: 1400px;
    height: 350px;
    margin: 0 auto;
    .el-input,
    .el-button {
      height: 60px;
      .el-input__inner {
        height: 60px;
        line-height: 60px;
      }
    }
    .title {
      height: 30px;
      font-size: 30px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #ffffff;
      margin-right: 20px;
    }
    .record-list {
      height: 19px;
      cursor: pointer;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #ffffff;
      margin-bottom: 21px;
      span {
        position: relative;
        padding-right: 40px;
      }
      span::after {
        position: absolute;
        content: " ";
        height: 16px;
        width: 1px;
        top: 50%;
        transform: translateY(-50%);
        right: 0;
        margin: 0 15px;
        background-color: #ffffff;
      }
      span:last-child:after {
        display: none;
      }
    }
    .el-input-group__append,
    .el-button {
      color: #ffffff !important;
      background-color: #0052d9 !important;
      border-color: #0052d9 !important;
    }
  }
  .count-box {
    margin: 80px auto 0;
    width: 900px;
    .count-item {
      .count {
        font-size: 36px;
        color: #fff;
        line-height: 36px;
        text-align: center;
      }
      .count-name {
        color: #cfd6e6;
        font-size: 18px;
        margin-top: 18px;
        text-align: center;
      }
    }
  }
}
</style>
